import * as React from 'react'
import { Form, Card, Button, Table, Modal, Input, InputNumber, Select, message } from 'antd'
import '../../assets/style/TableList.less'
import { post, SUBMIT_COST } from '../../service/api'
const Option = Select.Option
const FormItem = Form.Item
const AddTable = Form.create()((props: any) => {
  const { form, visible, modelVisible, handleSubmit, entity } = props
  const { getFieldDecorator } = form
  const formItemLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
  }
  const okHandle = () => {
    form.validateFields((err: any, fieldsValue: any) => {
      if (err) return
      form.resetFields()
      handleSubmit(fieldsValue)
    })
  }
  return (
    <Modal
      title="成本维护"
      width={600}
      visible={visible}
      onOk={okHandle}
      onCancel={() => modelVisible(false)}>
      <FormItem label="选择分类" {...formItemLayout}>
        {getFieldDecorator('typeid', {
          initialValue: entity.typeid,
          rules: [{ required: true, message: '请输入幅宽/规格' }], })(
          <Select style={{width: '100%'}}>
            <Option value="01">面料</Option>
            <Option value="02">辅料</Option>
            <Option value="03">工艺</Option>
          </Select>
        )}
      </FormItem>
      <FormItem label="物料名称/编码" {...formItemLayout}>
        {getFieldDecorator('materiel', { 
          initialValue: entity.materiel,
          rules: [{ required: true, message: '请输入物料名称/编码' }], })(
          <Input />
        )}
      </FormItem>
      <FormItem label="幅宽/规格" {...formItemLayout}>
        {getFieldDecorator('Width', { 
          initialValue: entity.Width,
          rules: [{ required: true, message: '请输入幅宽/规格' }], })(
          <Input />
        )}
      </FormItem>
      <FormItem label="单位" {...formItemLayout}>
        {getFieldDecorator('unit', { 
          initialValue: entity.unit,
          rules: [{ required: true, message: '请输入单位' }], })(
          <Input />
        )}
      </FormItem>
      <FormItem label="单位用量" {...formItemLayout}>
        {getFieldDecorator('uqty', { 
          initialValue: entity.uqty,
          rules: [{ required: true, message: '请输入单位用量' }], })(
          <InputNumber style={{width: '100%'}}/>
        )}
      </FormItem>
      <FormItem label="损耗率" {...formItemLayout}>
        {getFieldDecorator('lossrate', { 
          initialValue: entity.lossrate,
          rules: [{ required: true, message: '请输入损耗率' }], })(
          <InputNumber style={{width: '100%'}}/>
        )}
      </FormItem>
      <FormItem label="预计总用量" {...formItemLayout}>
        {getFieldDecorator('amount', { 
          initialValue: entity.amount,
          rules: [{ required: true, message: '请输入预计总用量' }], })(
          <InputNumber style={{width: '100%'}}/>
        )}
      </FormItem>
      <FormItem label="单价" {...formItemLayout}>
        {getFieldDecorator('price', { 
          initialValue: entity.price,
          rules: [{ required: true, message: '请输入单价' }], })(
          <InputNumber style={{width: '100%'}}/>
        )}
      </FormItem>
      <FormItem label="差异价格" {...formItemLayout}>
        {getFieldDecorator('difprice', { 
          initialValue: entity.difprice,
          rules: [{ required: true, message: '请输入单价' }], })(
          <InputNumber style={{width: '100%'}}/>
        )}
      </FormItem>
      <FormItem label="供应商报价金额" {...formItemLayout}>
        {getFieldDecorator('offervalue', { 
          initialValue: entity.offervalue,
          rules: [{ required: true, message: '请输入供应商报价金额' }], })(
          <InputNumber style={{width: '100%'}}/>
        )}
      </FormItem>
    </Modal>
  )
})

class ConstDes extends React.Component<any, any> {

  state = {
    visible: false,
    entity: {
      Id: ''
    } as any
  }
  componentDidMount() {
    this.record()
  }
  record() {
    const {sample: { sampleId }, recordDetail } = this.props
    recordDetail(sampleId)
  }
  //显示隐藏框
  modelVisible = (visible: boolean) => {
    this.setState({
      ...this.state,
      visible
    })
  }
  handleSubmit = (filed: any) => {
    const { record, sample: { sampleId } } = this.props
    const { entity } = this.state
    let formData = record
    let DetailModels: any [] = []
    if(entity.Id) {//编辑
      filed.Id = entity.Id
      formData.DetailModels.map((row: any) => {
        if(row.Id == filed.Id) {
          DetailModels = [...DetailModels, filed]
        }else {
          DetailModels = [...DetailModels, row]
        }
      })
    }else {
      DetailModels = [...formData.DetailModels, filed]
    }
    formData = {
      ...formData,
      sampleId,
      DetailModels
    }
    post(SUBMIT_COST, { ids: formData, sampleId }).then((res: any) => {
      if (res.code == '1') {
        message.success('操作成功！')
        this.modelVisible(false)
        this.record()
      }else {
        message.error(res.errMsg)
      }
    })
  }
  handleInfo (row: any) {
    this.setState({
      ...this.state,
      visible: true,
      entity: row
    })
  }
  handleSave = (e: any) => {
    e.preventDefault()
    const { form, record, sample: { sampleId } } = this.props
    form.validateFields((err: any, fieldsValue: any) => {
      if (err) return
      let data = {
        ...record,
        ...fieldsValue
      }
      post(SUBMIT_COST, { ids: data, sampleId }).then((res: any) => {
        if (res.code == '1') {
          message.success('操作成功！')
        }else {
          message.error(res.errMsg)
        }
      })
    })
  }
  render() {
    const { record, form } = this.props
    const { visible, entity } = this.state
    const { getFieldDecorator } = form
    const columns = [
      { title: '物料名称/编码', dataIndex: 'materiel' },
      { 
        title: '类型', 
        dataIndex: 'typeid', 
        render: (text: any): string => {
          if(text == '01')
            return '面料'
          else if(text == '02')
            return '辅料'
          else if(text == '03')
            return '工艺' 
          else 
            return ''
        }
      },
      { title: '幅宽/规格', dataIndex: 'Width' },
      { title: '单位', dataIndex: 'unit' },
      { title: '单位用量', dataIndex: 'uqty' },
      { title: '损耗率', dataIndex: 'lossrate' },
      { title: '预计总用量', dataIndex: 'amount' },
      { title: '单价', dataIndex: 'price' },
      { title: '差异价格', dataIndex: 'difprice' },
      { title: '供应商报价金额', dataIndex: 'offervalue' }, {
        title: '操作',
        width: '150px',
        render: (row: any) => (
          <React.Fragment>
            <a onClick={() => this.handleInfo(row)}>编辑</a>
          </React.Fragment>
        ),
      },
    ]
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 34 },
        sm: { span: 12 },
        md: { span: 15 },
      },
    }
    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    }

    return (
      <div>
         <Card title="成本分解">
          <div className="tableList">
            <div className="tableListOperator">
              <span>
                <Button type="primary" onClick={() =>this.handleInfo({})}>添加</Button>
              </span>
            </div>
            <Table
              rowKey = "Id"
              dataSource={record.DetailModels}
              columns={columns}
            />
          </div>
        </Card>
        <Card bordered style = {{marginTop: "20px"}} title="费用信息">
          <Form layout="horizontal" onSubmit={ this.handleSave }>
            <FormItem label="工价" {...formItemLayout}>
              {getFieldDecorator('Wages', { 
                rules: [{ required: true, message: '请输入工价' }],
                initialValue: record.Wages
              })(
                <InputNumber style={{width: '100%'}} />
              )}
            </FormItem>
            <FormItem label="利润" {...formItemLayout}>
              {getFieldDecorator('profit', { 
                rules: [{ required: true, message: '请输入利润' }], 
                initialValue: record.profit
              })(
                <InputNumber style={{width: '100%'}} />
              )}
            </FormItem>
            <FormItem label="运费" {...formItemLayout}>
              {getFieldDecorator('freight', { 
                rules: [{ required: true, message: '请输入运费' }], 
                initialValue: record.freight
              })(
                <InputNumber style={{width: '100%'}} />
              )}
            </FormItem>
            <FormItem label="其他费用" {...formItemLayout}>
              {getFieldDecorator('Other', { 
                rules: [{ required: true, message: '请输入其他费用' }],
                initialValue: record.Other
              })(
                <InputNumber style={{width: '100%'}} />
              )}
            </FormItem>
            <FormItem label="最终报价" {...formItemLayout}>
              {getFieldDecorator('offer', { 
                rules: [{ required: true, message: '请输入最终报价' }],
                initialValue: record.offer
              })(
                <InputNumber style={{width: '100%'}} />
              )}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </FormItem>
          </Form>
        </Card>
        <AddTable 
          visible = {visible}
          entity = {entity}
          modelVisible = {this.modelVisible} 
          handleSubmit = {this.handleSubmit}/>
      </div>
    )
  } 
}
export default Form.create()(ConstDes)